<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>考试</title>
    <style>
        .boy {
            display: flex;
        }

        .boy div {
            margin: 10px;
            padding: 10px;
            border: 1px black solid;
        }

        img {
            width: 100px;
            height: 100px;
        }
        ul{
            list-style: none;
        }
        .product{
            display: flex;
        }
        .product li{
            margin: 10px;
        }
    </style>
</head>

<body>
    <div class="boy">
        <div>空调</div>
        <div>平板电视</div>
        <div>生活电器</div>
        <div>洗衣机</div>
        <div>冰箱</div>
        <div>厨房大电器</div>
    </div>
    <h1>商品列表</h1>
    <ul class="product">
    </ul>
    <h1>购物车列表</h1>
    全选<input type="checkbox" onclick="quan()">
    反选 <input type="checkbox" onclick="fan()">
    <button onclick="shan1()">删除选中</button>
    <ul class="shop">
    </ul>
    <h1>结算： <span class="zong">0</span><button onclick="jiesuan()">结算</button></h1>
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
    <script>
        var data = [{
            pid: 0,
            id: 0,
            name: 'Haier空调',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/254014/12/21333/93362/67b04f8eFee4ce76f/1273847dd9c2c279.jpg',
            Price: 10,
            quantity: 1,
            is:false
        }, {
            pid: 0,
            id: 1,
            name: '美的空调',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/267573/3/29157/113360/67c9a540F6ad15af7/d689eee78897dd84.jpg',
            Price: 10,
            quantity: 1,
            is:false
        }, {
            pid: 0,
            id: 2,
            name: '小米空调',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/259295/7/29452/88456/67ca9c06F9e15786a/ce73f1d8d271d5c1.jpg',
            Price: 10,
            quantity: 1,
            is:false
        }, {
            pid: 1,
            id: 3,
            name: '电视',
            img: 'https://img11.360buyimg.com/n7/jfs/t1/243510/40/14929/142043/668f4e2cF7f89a911/b2008cfd6227dcd5.jpg.avif',
            Price: 20,
            quantity: 1,
            is:false
        }, {
            pid: 1,
            id: 4,
            name: '海信电视',
            img: 'https://img11.360buyimg.com/n7/jfs/t1/266734/4/25448/102810/67c031caFa92fac05/8666848b313a89a7.jpg.avif',
            Price: 20,
            quantity: 1,
            is:false
        }, {
            pid: 1,
            id: 5,
            name: '平板',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/258165/1/18354/132571/67a9cc2dFe5f79c76/d50e03abf7289a0b.png.avif',
            Price: 20,
            quantity: 1,
            is:false
        }, {
            pid: 2,
            id: 6,
            name: '小电锅',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/211474/29/21234/82285/64216014F517854c2/8d8e9b439d9c3b82.jpg.avif',
            Price: 30,
            quantity: 1,
            is:false
        }, {
            pid: 2,
            id: 7,
            name: '吹风机',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/256841/9/29986/68500/67ca55afF0c20cf43/0a5b1995823c5d09.jpg.avif',
            Price: 30,
            quantity: 1,
            is:false
        }, {
            pid: 2,
            id: 8,
            name: '吸尘器',
            img: 'https://img12.360buyimg.com/n7/jfs/t1/263955/26/25849/175304/67c19207Fe5d8bcd2/1ec2777bd32f44b4.jpg.avif',
            Price: 30,
            quantity: 1,
            is:false
        }, {
            pid: 3,
            id: 9,
            name: '博世洗衣机',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/263485/22/29303/57069/67ca5b70F67975f9e/ee9c5d0991c81641.jpg.avif',
            Price: 40,
            quantity: 1,
            is:false
        }, {
            pid: 3,
            id: 10,
            name: '志高洗衣机',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/257933/16/28142/118235/67c6c32dF715b6e7a/baee6d060c47699c.jpg.avif',
            Price: 40,
            quantity: 1,
            is:false
        }, {
            pid: 3,
            id: 11,
            name: '长虹洗衣机',
            img: 'https://img11.360buyimg.com/n7/jfs/t1/220001/35/37846/32203/65f55a94F34c84b2e/e22f3afdf6ddc69f.jpg.avif',
            Price: 40,
            quantity: 1,
            is:false
        }, {
            pid:4 ,
            id: 12,
            name: '东泛冰箱',
            img: 'https://img14.360buyimg.com/n7/jfs/t1/264273/38/29592/173165/67ca9ecaFf83757a6/dba7b07601b0aa2b.jpg.avif',
            Price: 50,
            quantity: 1,
            is:false
        },{
            pid:4 ,
            id: 13,
            name: '小米冰箱',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/261709/18/29256/112478/67c9c88dFbfeed838/c59bfdca670ea782.jpg.avif',
            Price: 50,
            quantity: 1,
            is:false
        },{
            pid:4 ,
            id: 14,
            name: '海尔冰箱',
            img: 'https://img14.360buyimg.com/n7/jfs/t1/268738/3/22902/14   0768/67b9510dFa4ee357d/8792c10fb759cbe4.jpg.avif',
            Price: 50,
            quantity: 1,
            is:false
        },{
            pid:5 ,
            id: 15,
            name: '杨子锅',
            img: 'https://img13.360buyimg.com/n7/jfs/t1/267310/12/29226/97988/67ca4b39Fbebb8746/27ca135cb9dcb10f.jpg.avif',
            Price: 60,
            quantity: 1,
            is:false
        },{
            pid:5 ,
            id: 16,
            name: '苏泊尔锅',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/235771/36/31261/144801/67b6ce94F88d0a7e0/cf7fe9e00df36a79.jpg.avif',
            Price: 60,
            quantity: 1,
            is:false
        },{
            pid:5 ,
            id: 17,
            name: '电蒸锅',
            img: 'https://img10.360buyimg.com/n7/jfs/t1/258929/37/5367/152213/67721286F3a88f64e/0d7cec7d2cee004e.jpg.avif',
            Price: 60,
            quantity: 1,
            is:false
        },]
        //渲染商品
        var iid = 0
        $(".boy div").each((index, item) => {
            item.addEventListener("click", () => {
                data.forEach(item => {
                    iid = index
                    if (item.pid == iid) {
                        // console.log(item);
                        app()
                    }
                })
            })
        })
        function app() {
            $('.product').html('')
            data.forEach(item => {
                if (item.pid == iid) {
                    // console.log(item);
                    $('.product').append(`
                <li><img src="${item.img}" alt=""><br>
                <span>名字:${item.name}</span><br>
            价格:${item.Price} <br><button onclick="add(${item.id})">添加到购物车</button></li>
                `)
                }
            })
        }
        app()
        //添加到购物车
        var arr = []
        function add(id) {
            var a = data.find(item => item.id == id)
            arr.push(a)
            // console.log(arr);
            xuan()
        }
        //渲染购物车
        function xuan(){
            $(".shop").html("")
            arr.forEach(item => {
                // console.log(item);
                
                $(".shop").append(`
      <li><input type="checkbox" ${item.is ?'checked':''} onclick="dan(${item.id})">
            <img src="${item.img}" alt="">
        名字：${item.name}
        价格：${item.Price}<button onclick="jian(${item.id})">-</button>
    <span>${item.quantity}</span><button onclick="jia(${item.id})">+</button>
    <button onclick="shan(${item.id})">删除</button></li>`)
            })
        }
        //全选
        function quan(){
            // console.log(event.target.checked);
            var a=$('.shop input')
            a.each((index,item)=>{
                item.checked=event.target.checked
                arr.forEach(item1=>{
                    item1.is=event.target.checked
                    // console.log(item1.is); 
                    var zong=0    
                    arr.forEach(item2=>{
                if(item2.is){
                    // console.log(a);
                    zong+=item2.Price*item2.quantity
                }$(".zong").html('')
               $(".zong").append(`${zong}`)
            })               
                })
            })
        }
        //反选
        function fan(){
            // console.log(event.target.checked);
            var a=$('.shop input')
            a.each((index,item)=>{
                item.checked=!event.target.checked
                arr.forEach(item1=>{
                    var zong=0
                    item1.is=!event.target.checked
                    arr.forEach(item2=>{
                if(item2.is){
                    // console.log(a);
                    zong+=item2.Price*item2.quantity
                }$(".zong").html('')
               $(".zong").append(`${zong}`)
            })
                    // console.log(item1.is);                    
                })
            })
        }
        //单选
        function dan(id){
            var zong=0
            var a=arr.find(item=>item.id==id)
            a.is=event.target.checked
            arr.forEach(item=>{
                if(item.is){
                    // console.log(a);
                    zong+=item.Price*item.quantity
                }$(".zong").html('')
               $(".zong").append(`${zong}`)
            })
            
        }
        //++
        function jia(id){
            var a=arr.find(item=>item.id==id)
            a.quantity++
            var zong=0
            arr.forEach(item=>{
                if(item.is){
                    zong+=item.Price*item.quantity
                }
            })
            $(".zong").html('')
            $('.zong').append(`${zong}`)
            xuan()
        }
        //--
        function jian(id){
            var a=arr.find(item=>item.id==id)
           if( a.quantity>0){
            a.quantity--
            var zong=0
            arr.forEach(item=>{
                if(item.is){
                    zong+=item.Price*item.quantity
                }
            })
            $(".zong").html('')
            $('.zong').append(`${zong}`)
               xuan()
           }
        }
        //删除
        function shan(id){
            var a=arr.findIndex(item=>item.id==id)
            arr.splice(a,1)
            xuan()
        }
        //删除选中
        function shan1(){
            function ppp(){
                arr.forEach(item=>{
                if(item.is){
                    
                    var a=arr.findIndex(item1=>item1.id==item.id)
                    arr.splice(a,1)
                    console.log(arr);
                    var zong=0
                arr.forEach(item=>{
                    if(item.is){
                        zong+=item.Price*item.quantity
                    }
                })
                $(".zong").html('')
                $('.zong').append(`${zong}`)
                    xuan()
                }
                })
            }
        }
        //结算
        function jiesuan(){
            var arr1=[]
           arr.forEach(item=>{
            if(item.is){
                arr1.push(item)
            }
           })
           localStorage.removeItem('1')
         localStorage.setItem('1',JSON.stringify(arr1))
         location.assign("./结算.html")
        }
    </script>
</body>

</html>